<script setup>
// import { ref } from 'vue'
import { useCartStore } from '@/stores/car'
import { Delete } from '@element-plus/icons-vue'
defineOptions({ name: 'indeItem' })
const storeCar = useCartStore()
// 删除购物车消息弹出提示
const delCar = async (id) => {
  await ElMessageBox.confirm('确定删除这件商品吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  storeCar.delCart(id)
}
// item里面有skuid，selected里面有 true，false（判断条件）
const singCheckbox = (item, selected) => {
  //   将skuId传到pinia中
  storeCar.singleCheck(item.skuId, selected)
}

const allCheck = (selected) => {
  storeCar.allCheck(selected)
}
</script>
<template>
  <!-- 商品列表卡片 -->
  <div class="card">
    <el-card style="width: 100%">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <el-checkbox :model-value="storeCar.isAll" label="全选" @change="allCheck" size="large" />
          <span class="commodity">商品信息</span>
          <span class="price">单价</span>
          <span class="count">数量</span>
          <span class="sum">小计</span>
          <span class="Operation" style="margin-right: 10px">操作</span>
        </div>
      </template>
      <div class="text" v-if="storeCar.cartList.length !== 0">
        <div class="content" v-for="item in storeCar.cartList" :key="item.skuId">
          <!-- 复选框 -->
          <div class="xuanze">
            <!-- 一个参数只能收集到 true 或 false判断选中与没选中的判断条件，没有办法拿到skuId,也就没有办法去pinia里面修改状态
                        ，将true或者false传递到pinia中，所以要进行改造，将skuid拿到，找到我点击的哪一件商品，在将true 或 false 传递到pinia
                    中去，改变selected的值 -->
            <el-checkbox
              size="large"
              :model-value="item.selected"
              @change="(selected) => singCheckbox(item, selected)"
            />
          </div>
          <div class="sp-commodity">
            <img :src="item.picture" alt="" width="100px" height="100px" />
            <p style="margin-left: 10px">{{ item.name }}</p>
          </div>
          <span class="sp-price">${{ item.price }}</span>
          <span class="sp-count"><el-input-number v-model="item.count" :min="1" /></span>
          <span class="sp-sum">${{ (item.price * item.count).toFixed(2) }}</span>
          <span class="sp-Operation"
            ><el-button type="primary" :icon="Delete" circle @click="delCar(item.skuId)"
          /></span>
        </div>
      </div>
      <div class="kong" v-else>
        <i class="iconfont icon-gouwuche" style="font-size: 55px; color: #8a8a8a"></i>
        <span>您的购物车空空如也</span>
      </div>
    </el-card>
  </div>

  <!-- 下单结算部分 -->
  <div class="xiadan">
    <el-card style="width: 100%" class="place">
      <div class="footer" style="width: 100%; height: 100%">
        <span
          >共{{ storeCar.allCount }}件商品；已选择{{ storeCar.selectedCount }}件商品；合计
          <em style="color: red; font-weight: bolder; font-style: normal"
            >￥{{ storeCar.selectedPrice.toFixed(2) }}</em>元
        </span>
        <el-button type="success" @click="$router.push('/settlement')">下单结算</el-button>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.card {
  width: 1200px;
  margin: 0 auto;
}
.card-header,
.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.commodity,
.price,
.count,
.sum,
.Operation {
  font-weight: bolder;
}
.content {
  position: relative;
  border-bottom: 1px solid #eee;
}
.xuanze {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-commodity {
  margin-right: 750px;
  /* border: 1px solid #000; */
  width: 300px;
  display: flex;
  align-items: center;
}
.sp-price {
  position: absolute;
  top: 35px;
  left: 470px;
  /* border: 1px solid #000; */
}
.sp-count {
  position: absolute;
  top: 35px;
  left: 635px;
  /* border: 1px solid #000; */
}
.sp-sum {
  position: absolute;
  top: 35px;
  left: 890px;
  /* border: 1px solid #000; */
}
.sp-Operation {
  position: absolute;
  top: 30px;
  left: 1120px;
  /* border: 1px solid #000; */
}

.xiadan {
  margin: 20px auto;
  width: 1200px;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kong {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.kong span {
  font-size: 28px;
  color: #969696;
  font-weight: bold;
  text-shadow: 2px 0px 5px #dcdcdc;
  font-family: '楷体';
}
</style>
